<script setup>
import { defineEmits, defineProps, ref } from 'vue'
import dayjs from 'dayjs'
import config from '@/config'
import { attendanceRuleApi } from '@/api/attendance'

const textareaValue = ref('') //文本域内容
const baseUrl = config.baseUrl
const props = defineProps({
  showTag: Boolean,
  typeShenPi: String,
  itemProps: Object,
})
const emit = defineEmits(['updatedCard'])
const popup = ref(null)
const inputValue = ref('')
const titlePopup = ref('')
const rejectType = ref('')
// 打开弹窗
const openPopup = () => {
  popup.value.open()
}

// 同意/拒绝 确定按钮
const handleConfirm = async () => {
  if (rejectType.value === 1) {
    // 驳回
    let params = {
      applyId: props.itemProps.id,
      type: props.itemProps.appType,
      status: '驳回',
      remark: textareaValue.value,
    }

    let { code } = await attendanceRuleApi(params)
    if (code === 200) {
      uni.showToast({
        icon: 'success',
        title: '已驳回',
      })
      emit('updatedCard')
    }
  } else {
    // 同意
    let params = {
      applyId: props.itemProps.id,
      type: props.itemProps.appType,
      status: '已处理',
      remark: textareaValue.value,
    }
    let { code } = await attendanceRuleApi(params)
    if (code === 200) {
      uni.showToast({
        icon: 'success',
        title: '已同意',
      })
      emit('updatedCard')
    }
  }

  popup.value.close()
}
// 关闭弹窗
const handleClose = () => {
  popup.value.close()
}
// 已发起 撤销
const handleCancel = () => {
  uni.showModal({
    title: '撤销',
    content: '是否撤销当前申请?', //模板中提示的内容
    confirmText: '确定',
    success: async (res) => {
      //点击复制内容的后调函数
      if (res.confirm) {
        console.log('撤销')
        // let params = {
        //   applyId,
        //   type,
        //   status: '已处理',
        // }
        // let { code } = await attendanceRuleApi(params)
        // if (code === 200) {
        //   uni.showToast({
        //     icon: 'success',
        //     title: '已同意',
        //   })
        //   emit('updatedCard')
        // }
      }
    },
  })
}
const handleClick = () => {
  openPopup()
  titlePopup.value = '是否同意该申请?'
  rejectType.value = 0
  // uni.showModal({
  //   title: '审核',
  //   content: '是否同意该申请?', //模板中提示的内容
  //   confirmText: '同意',
  //   success: async (res) => {
  //     //点击复制内容的后调函数
  //     if (res.confirm) {
  //       let params = {
  //         applyId,
  //         type,
  //         status: '已处理',
  //       }
  //       let { code } = await attendanceRuleApi(params)
  //       if (code === 200) {
  //         uni.showToast({
  //           icon: 'success',
  //           title: '已同意',
  //         })
  //         emit('updatedCard')
  //       }
  //     } else if (res.cancel) {
  //       uni.showToast({
  //         //提示
  //         title: '取消',
  //         icon: 'none',
  //       })
  //     }
  //   },
  // })
}
const jujueFn = () => {
  openPopup()
  titlePopup.value = '是否驳回该申请'
  rejectType.value = 1
  // uni.showModal({
  //   title: '审核',
  //   content: '是否驳回该申请', //模板中提示的内容
  //   confirmText: '驳回',
  //   confirmColor: 'red',
  //   success: async (res) => {
  //     //点击复制内容的后调函数
  //     if (res.confirm) {
  //       let params = {
  //         applyId,
  //         type,
  //         status: '驳回',
  //       }
  //       let { code } = await attendanceRuleApi(params)
  //       if (code === 200) {
  //         uni.showToast({
  //           icon: 'success',
  //           title: '已驳回',
  //         })
  //         emit('updatedCard')
  //       }
  //     } else if (res.cancel) {
  //       uni.showToast({
  //         //提示
  //         title: '取消',
  //         icon: 'none',
  //       })
  //     }
  //   },
  // })
}
</script>

<template>
  <view class="container">
    <view class="title">
      <text class="titleText">{{ props.itemProps.type }}</text>
      <span style="flex-grow: 1"></span>
      <p v-if="props.showTag" :class="props.itemProps.applyStatus">
        {{ props.itemProps.applyStatus }}
      </p>
    </view>
    <view v-if="props.itemProps.type === '请假'" class="contentContainer">
      <view class="content">
        <text class="contentTitle">假期类型</text>
        <text class="contentTitle">：</text>
        <text class="contentText">{{ props.itemProps.type2 }}</text>
      </view>
      <view class="content">
        <text class="contentTitle">开始时间</text>
        <text class="contentTitle">：</text>
        <text class="contentText"
          >{{ dayjs(props.itemProps.date2.split(',')[0]).format('YYYY-MM-DD HH:mm') }}
        </text>
      </view>
      <view class="content">
        <text class="contentTitle">结束时间</text>
        <text class="contentTitle">：</text>
        <text class="contentText"
          >{{ dayjs(props.itemProps.date2.split(',')[1]).format('YYYY-MM-DD HH:mm') }}
        </text>
      </view>
    </view>
    <view v-if="props.itemProps.type === '加班'" class="contentContainer">
      <view class="content">
        <text class="contentTitle">开始时间</text>
        <text class="contentTitle">：</text>
        <text class="contentText"
          >{{ dayjs(props.itemProps.date2.split(',')[0]).format('YYYY-MM-DD HH:mm') }}
        </text>
      </view>
      <view class="content">
        <text class="contentTitle">结束时间</text>
        <text class="contentTitle">：</text>
        <text class="contentText"
          >{{ dayjs(props.itemProps.date2.split(',')[1]).format('YYYY-MM-DD HH:mm') }}
        </text>
      </view>
    </view>
    <view v-if="props.itemProps.type === '补卡'" class="contentContainer">
      <view class="content">
        <text class="contentTitle">补卡日期</text>
        <text class="contentTitle">：</text>
        <text class="contentText">{{ dayjs(props.itemProps.date).format('YYYY-MM-DD') }}</text>
      </view>
      <!--      <view class="content">-->
      <!--        <text class="contentTitle">补卡班次</text>-->
      <!--        <text class="contentTitle">：</text>-->
      <!--        <text class="contentText">{{props.itemProps.position}}</text>-->
      <!--      </view>-->
      <view class="content">
        <text class="contentTitle">补卡时间</text>
        <text class="contentTitle">：</text>
        <text class="contentText"
          >{{ dayjs(props.itemProps.createTime).format('YYYY-MM-DD HH:mm') }}
        </text>
      </view>
    </view>
    <view class="contentContainer"></view>
    <view class="info">
      <image
        :src="baseUrl + props.itemProps.avatar"
        style="width: 36rpx; height: 36rpx; margin-right: 8rpx; border-radius: 50%"
      ></image>
      <text class="nameText">{{ props.itemProps.nickName }}</text>
      <span style="flex-grow: 1"></span>
      <text class="timeText"
        >{{ dayjs(props.itemProps.createTime).format('YYYY-MM-DD HH:mm') }}
      </text>
    </view>
    <!--    <view v-if="typeShenPi === '已发起'" class="buttonGroup">-->
    <!--      <text class="button" style="color: #165dff" @tap.stop="handleCancel"> 撤销 </text>-->
    <!--    </view>-->
    <view
      v-if="props.itemProps.applyStatus === '审核中' && typeShenPi === '待办'"
      class="buttonGroup"
    >
      <text
        class="button"
        style="color: #f53f3f; border-right: 1px solid #f7f8fa"
        @tap.stop="jujueFn"
        >拒绝
      </text>
      <!--      <span ></span>-->
      <text class="button" style="color: #165dff" @tap.stop="handleClick"> 同意 </text>
    </view>
    <uni-popup ref="popup" type="dialog" @click.stop>
      <uni-popup-dialog
        :title="titlePopup"
        :before-close="true"
        @confirm="handleConfirm"
        @close="handleClose"
      >
        <!-- 自定义内容区域，替换默认的input -->
        <textarea
          class="custom-textarea"
          v-model="textareaValue"
          placeholder="请输入审批意见"
          auto-height
          @click.stop
        ></textarea>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/variables.scss';
@import '@/static/style/common.scss';
@import '@/static/style/index.scss';

p {
  //width: 56rpx;
  height: 34rpx;
  justify-content: center;
  font-family: 'PingFang SC';
  font-size: 20rpx;
  font-style: normal;
  font-weight: 500;
  padding: 3rpx 8rpx;
  border-radius: 4rpx;
}
.办理中 {
  color: #ff7d00;
  background-color: #fff7e8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  border-radius: 0.15625rem;
  font-size: 0.75rem;
}

.container {
  //height: 380rpx;
  width: 686rpx;
  //display: flex;
  padding-top: 24rpx;
  //flex-direction: column;
  //align-items: flex-start;
  //align-self: stretch;
  border-radius: 16rpx;
  border: 1rpx solid var(---line-1, #e5e6eb);
  background: #fff;
  margin: 32rpx;
}

.title {
  display: flex;
  align-items: stretch;
  //justify-content: space-between;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.titleText {
  color: #1d2129;
  font-family: 'PingFang SC';
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 44.8rpx;
}

.contentContainer {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.content {
  margin-top: 16rpx;
}

.contentTitle {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.contentText {
  color: #1d2129;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.info {
  display: flex;
  align-items: stretch;
  //justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  margin-bottom: 16rpx;
}

.nameText {
  color: #4e5969;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6rpx;
}

.timeText {
  color: #86909c;
  text-align: right;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6rpx;
}

.buttonGroup {
  display: flex;
  align-items: stretch;
  //justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f7f8fa;
}

.button {
  display: flex;
  width: 50%;
  padding: 24rpx 32rpx;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
  flex: 1 0 0;
}
.custom-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #eee;
}
:deep(.uni-popup__error) {
  color: #333;
}
</style>
